<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>差旅费用</title>

    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
    <script src="js/jquery-2.2.2.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/mui.picker.min.js"></script>
    <style>
        .mui-btn {
            /*background-color: #83A0D1;*/
            /*border: 1px solid #83A0D1*/
        }

        .mui-badge {
            /*font-size: 16px;*/
        }

        .mui-table-view li {
            /*font-size: 16px;*/
        }

        .mui-tab-item:active {
            /*background-color: #c17b0f*/
        }

        .mui-tab-item:link {
            /*background-color: #E09219;*/
        }
        .mui-col-sm-4{
            text-align: center;
        }
        .mui-col-sm-4 a{
            display: inline-block;
            width: 100%;
            height: 33px;
            vertical-align: bottom;
            /*border: 1px solid #00a0df;*/
            /*background-color: white;*/
        }

        .underline{
            border-bottom:1px solid #00a0df;
        }
        .mui-col-sm-4 a:click{
            /*background:#aaaaff;*/
        }
        .btn,.mui-input-row{
            width:100%;
            margin: 5px 0px;
            /*background-color: #83A0D1;*/
            /*border: 1px solid #83A0D1;*/
            height: 35px;
        }
        .blue{
            border-left:6px solid #00a0df;
        }
        .green{
            border-left:6px solid #b2dba1;
        }
    </style>
</head>
<body ng-app="myApp" ng-cloak>
<div ng-controller="myCtrl">
    <!--mui-bar-tab是在下面的-->
    <!--nav是在上面-->

    <div class="mui-row" style="padding: 10px;" >
        <!--<div class="mui-col-sm-4 mui-col-xs-4" ui-sref="input">-->


        <div class="mui-col-sm-4 mui-col-xs-4" >
            <!--<a class="mui-control-item underline" ng-click="go('input');">-->
            <a class="underline" ui-sref="input">
                填写明细
            </a>
            <!--<button ng-click="go('input');" class="mui-btn ">填写明细</button>-->
        </div>

        <!--<div class="mui-col-sm-4 mui-col-xs-4" ng-click="go('list');">-->
        <div class="mui-col-sm-4 mui-col-xs-4" >
            <a class="" ui-sref="list">
                查看报表
            </a>
        </div>
        <!--<div class="mui-col-sm-4 mui-col-xs-4" ng-click="go('person');">-->
        <div class="mui-col-sm-4 mui-col-xs-4" >
            <a class="" ui-sref="person">
                个人中心
            </a>
        </div>
    </div>

    <!--底部不要了,放着不能看-->
    <!--<header class="mui-bar mui-bar-tab">-->
        <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
        <!--<h1 class="mui-title">差旅费用</h1>-->
    <!--</header>-->


    <!--<div hd-slide></div>-->
    <!--<div style="padding: 10px 10px;">-->
        <!--<div id="segmentedControl" class="mui-segmented-control">-->
            <!--&lt;!&ndash;<nav class="mui-bar mui-bar-tab">&ndash;&gt;-->
            <!--<a class="mui-tab-item mui-active" ui-sref="list">-->
                <!--<span class="mui-icon mui-icon-home"></span>-->
                <!--<span class="mui-tab-label">首页</span>-->
            <!--</a>-->
            <!--<a class="mui-tab-item" ui-sref="input">-->
                <!--<span class="mui-icon mui-icon-email"></span>-->
                <!--&lt;!&ndash;<span class="mui-badge">9</span>&ndash;&gt;-->
                <!--<span class="mui-tab-label" ng-click="go('input');">添加</span>-->
            <!--</a>-->
            <!--<a class="mui-tab-item" ui-sref="list">-->
                <!--<span class="mui-icon mui-icon-contact"></span>-->
                <!--<span class="mui-tab-label">查看</span>-->
            <!--</a>-->
            <!--<a class="mui-tab-item" href="#">-->
                <!--<span class="mui-icon mui-icon-gear"></span>-->
                <!--<span class="mui-tab-label">设置</span>-->
            <!--</a>-->
            <!--&lt;!&ndash;</nav>&ndash;&gt;-->
        <!--</div>-->
    <!--</div>-->
    <div class="mui-content">

        <div ui-view>你访问的页面不存在</div>

        <!--<ul class="mui-table-view" >-->
        <!--<li class="mui-table-view-cell" ng-repeat="(k,v) in ticket">-->
        <!--{{k}}-->
        <!--<span class="mui-badge mui-badge-primary">{{v}}</span>-->
        <!--</li>-->
        <!--</ul>-->





    </div>



    <!--<div class="mui-card" ng-repeat="(k,v) in ticket">-->
    <!--&lt;!&ndash;页眉，放置标题&ndash;&gt;-->
    <!--<div class="mui-card-header">{{k}}</div>-->
    <!--&lt;!&ndash;内容区&ndash;&gt;-->
    <!--<div class="mui-card-content">{{v}}</div>-->
    <!--&lt;!&ndash;页脚，放置补充信息或支持的操作&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="mui-card-footer">页脚</div>&ndash;&gt;-->
    <!--</div>-->

    <!--<div class="mui-content">-->
    <!--<div class="mui-row" ng-repeat="(k,v) in ticket">-->
    <!--<div class="mui-col-sm-3 mui-col-xs-3">-->
    <!--<li class="mui-table-view-cell">-->
    <!--{{k}}-->

    <!--</li>-->
    <!--</div>-->
    <!--<div class="mui-col-sm-9 mui-col-xs-9">-->
    <!--<li class="mui-table-view-cell">-->

    <!--{{v}}-->
    <!--</li>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->


</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script>
    //    mui.init();
    var m = angular.module('myApp', ['ui.router']);//
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('input');//默认路由,没有的话就跳这里
        //定义路由规则
        $stateProvider
            .state('default', {
                url: '',//对应地址 url #
//                template: '<h1>后盾人</h1>'
                templateUrl: 'input.html',
                controller: 'myCtrl'
            })
            .state('list', {
                url: '/list',
                templateUrl: 'list.html',
    //            controller: ['$scope', function ($scope) {
    //                $scope.name = '向军'
    //            }]
                controller: 'myCtrl'
            })
            .state('input', {
                url: '/input',
                templateUrl: 'input.html',
                controller: 'myCtrl'
            })
            .state('person', {
                url: '/person',
                templateUrl: 'person.html',
                controller: 'myCtrl'
            })
            .state('edit', {
                url: '/edit/{index}',
                templateUrl: 'edit.html',
                controller: 'myCtrl'
            })
    }]);

    m.controller('myCtrl', ['$scope', '$http','$state', '$interval','$stateParams',function ($scope, $http,$state,$interval,$stateParams) {
//        $scope.url = "http://localhost/travel/api/api.php?callback=JSON_CALLBACK";//测试本地
        $scope.url = "http://fms_sup.huoyunren.com/travel/api/api.php?callback=JSON_CALLBACK";//线上

        $scope.now = new Date();
        $interval(function () {
//            var time = new Date().toLocaleDateString();
//            $scope.now = new Date().toLocaleTimeString();
            $scope.now = new Date();

        }, 1000);

        $scope.go = function (url) {
            alert(3);
            $state.go(url);//可以判断如果条件不满足,用这个就可以跳转
        };

        $scope.title = "aab";
        $scope.fybx = {};
        $scope.list = [];
        $scope.detaillist = [];

        $scope.submit = function(){
            console.log($.param($scope.fybx));

            $http.jsonp($scope.url + '&code=addcontent&' + $.param($scope.fybx))
                    .success(function (msg) {
                        console.log(msg);
//                    $scope.name = msg.price;
                        if(msg.res==1){
                            $scope.list.push(msg.data);

                            console.log($scope.list);
                        }

                    });
        };

        $scope.deleitem = function(id,index){
            if(!confirm("确认删除吗?")){
                return false;

            }
            console.log(id);
            $http.jsonp($scope.url + '&code=deleitem&id=' + id)
                    .success(function (msg) {
                        console.log(msg);
//                    $scope.name = msg.price;
                        if(msg.res==1){
//                            $scope.list.push(msg.data);

                            $scope.list.splice(index,1);
                            $scope.detaillist.splice(index,1);
                            console.log($scope.list);
                            $scope.search();
                        }

                    });
        };

        $scope.selectDate = function(){
            var picker = new mui.DtPicker({"beginYear":"2017","endYear":"2018"});//"type":"date",
            picker.show(function(rs) {
                $scope.fybx.date = rs.value;
                $scope.$apply();
            })
        };

        $scope.selecteditDate = function(){
            var picker = new mui.DtPicker({"beginYear":"2017","endYear":"2018"});//"type":"date",
            picker.show(function(rs) {
                $scope.editobj.date = rs.value;
                $scope.$apply();
            })
        };

//        selectbeginDate
        $scope.selectbeginDate = function(){
            var picker = new mui.DtPicker({"type":"date","beginYear":"2017","endYear":"2018"});
            picker.show(function(rs) {
                $scope.fybx.begin = rs.value;
                $scope.$apply();
            })
        };
        $scope.selectendDate = function(){
            var picker = new mui.DtPicker({"type":"date","beginYear":"2017","endYear":"2018"});
            picker.show(function(rs) {
                $scope.fybx.end = rs.value;
                $scope.$apply();
            })
        };


        $scope.editsubmit = function(){
            console.log($scope.editobj);
            $http.jsonp($scope.url + '&code=editsubmit&' + $.param($scope.editobj))
                    .success(function (msg) {
                        console.log(msg);
//                        $scope.fybx.result = msg.res;
//                        $state.go('list');
                        if(msg.res==1)$scope.search();



                    });
        };

        $scope.selectzflx = function(){

        };



        $scope.search = function () {
            $http.jsonp($scope.url + '&code=search&' + $.param($scope.fybx))
                    .success(function (msg) {
                        console.log(msg);
                        $scope.fybx.result = msg.res;

                    });
        };

        $scope.searchdetail = function(zflx){
            console.log(zflx);
            $http.jsonp($scope.url + '&code=searchdetail&zf=' + zflx + '&' + $.param($scope.fybx))
                    .success(function (msg) {
                        console.log(msg);
//                        $scope.fybx.result = msg.res;
                        $scope.detaillist = msg.res;

                    });
        };

        $scope.edititem = function (id,index) {
            console.log(id);
            console.log($scope.detaillist[index]);
            $scope.editobj = $scope.detaillist[index];
//            $state.go('edit',{index:index});
        };


//        $scope.index = $stateParams.index;
//        $scope.editobj = $scope.detaillist[$scope.index];

    }]);

    m.directive('hdCms', ['$http', function ($http) {
//使用场景
        return {
            restrict: 'EA',//A属性 attr e element C 不建议用会被定义样式
//            template: '<a class="mui-tab-item" href="#" style="color:#FAEDD8;">输入金额:{{fybx.money}}</a>',
            template: "<button  class='btn mui-btn' type='button'>输入金额:{{fybx.money}}</button>",
//            scope:{},//color可省

//            controller:'myCtrl',
            link: function (scope, elem, attr) {

//               console.log(scope);
//                var myurl = scope.url;
//                $(elem).css({backgroundColor:attr['bgcolor'],color:attr['fontcolor']}).html(scope.title);
                $(elem).on('click tap', function () {
//                    $scope.urgent = function(){
//            alert($scope.ticket.id);
//            mui.init();
                    mui.prompt('请输入金额：', '', '', ['取消', '确定'], function (e) {
                        if (e.index == 1) {
                            if (!e.value) {
                                mui.toast('请输入金额...');
                                return false;
                            }

                            scope.fybx.money = e.value;
                            scope.$apply();
//                            $http.jsonp(scope.url + '&code=urgenticket&id=' + scope.ticket.id + '&reason=' + e.value)
//                                    .success(function (msg) {
//                                        console.log(msg.res);
//                                        if (msg.res == 1) {
//                                            mui.toast('催单成功...');
//                                        }
//                                    });
                        }
                    });
//                    };
                })

            }
        }

    }]);

//    m.filter("myFilter",function(){
//        return function (value){
//            return parseInt(value);
//        };
//    });

    m.directive('hdZflx', ['$http', function ($http) {
//使用场景
        return {
            restrict: 'EA',//A属性 attr e element C 不建议用会被定义样式
            template: "<button  class='btn mui-btn mui-btn-danger mui-btn-outlined' type='button'>支付类型:{{fybx.zflx}}</button>",
//            scope:{},//color可省

//            controller:'myCtrl',
            link: function (scope, elem, attr) {
//              //普通示例
                var userPicker = new mui.PopPicker();
                userPicker.setData([
                    '民生信用卡',
                    '现金',
                    '花呗',
                    '余额宝',
                    '微信',
                ]);

                $(elem).on('tap click',function(){
                    userPicker.show(function(items) {
//                        userResult.innerText = JSON.stringify(items[0]);
                        console.log(items);
                        scope.fybx.zflx = items[0];
//                        $(elem).html("支付类型:"+items[0]);

                        scope.$apply();
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                });

            }
        }

    }]);


    m.directive('hdeditZflx', ['$http', function ($http) {
//使用场景
        return {
            restrict: 'EA',//A属性 attr e element C 不建议用会被定义样式
            template: "<button  class='btn mui-btn mui-btn-danger mui-btn-outlined' type='button'>支付类型:{{editobj.zflx}}</button>",
//            scope:{},//color可省

//            controller:'myCtrl',
            link: function (scope, elem, attr) {
//              //普通示例
                var userPicker = new mui.PopPicker();
                userPicker.setData([
                    '民生信用卡',
                    '现金',
                    '花呗',
                    '余额宝',
                    '微信',
                ]);

                $(elem).on('tap click',function(){
                    userPicker.show(function(items) {
//                        userResult.innerText = JSON.stringify(items[0]);
                        console.log(items);
                        scope.editobj.zflx = items[0];
//                        $(elem).html("支付类型:"+items[0]);

                        scope.$apply();
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                });

            }
        }

    }]);

    //侧滑
    m.directive('hdSlide', ['$http', function ($http) {
//使用场景
        return {
            restrict: 'EA',//A属性 attr e element C 不建议用会被定义样式
            templateUrl: "slide.html",
//            scope:{},//color可省

//            controller:'myCtrl',
            link: function (scope, elem, attr) {

                mui.init({
                    swipeBack: false
                });
                mui('.mui-scroll-wrapper').scroll({
                    indicators: true //是否显示滚动条
                });
//                $(elem).
                document.getElementById('slider').addEventListener('slide', function(e) {
                    if (e.detail.slideNumber === 1) {
                        console.log(1);
                    } else if (e.detail.slideNumber === 2) {
                        console.log(2);
                    }
                });

            }
        }

    }]);

    $(".mui-col-sm-4 a").click(function(){
        $(".mui-col-sm-4 a").removeClass("underline");
        $(this).addClass("underline");
    });
</script>
</body>
</html>